<!DOCTYPE html>
<html>
<head>
    <title>智能作业批改系统</title>
    <style>
        .upload-section { margin: 20px; padding: 15px; border: 1px solid #ddd; }
        #previewArea { display: flex; gap: 20px; margin-top: 20px; }
        .image-box { width: 45%; border: 2px dashed #ccc; padding: 10px; }
    </style>
</head>
<body>
    <div class="upload-section">
        <h3>上传试卷模板</h3>
        <input type="file" id="templateUpload" accept="image/*">
        <h3>上传学生作业</h3>
        <input type="file" id="homeworkUpload" accept="image/*">
        <button onclick="startCorrection()">开始批改</button>
    </div>

    <div id="previewArea">
        <div class="image-box">
            <h4>原始模板</h4>
            <img id="templatePreview" style="max-width:100%;">
        </div>
        <div class="image-box">
            <h4>学生作业</h4>
            <img id="homeworkPreview" style="max-width:100%;">
        </div>
    </div>

    <script>
        // 图片预览功能
        function previewImage(input, previewId) {
            const file = input.files[0];
            const reader = new FileReader();
            
            reader.onload = function(e) {
                document.getElementById(previewId).src = e.target.result;
            }
            
            if (file) {
                reader.readAsDataURL(file);
            }
        }

        // 绑定上传事件
        document.getElementById('templateUpload').addEventListener('change', function() {
            previewImage(this, 'templatePreview');
        });
        
        document.getElementById('homeworkUpload').addEventListener('change', function() {
            previewImage(this, 'homeworkPreview');
        });

        // 开始批改（待实现）
        // 修改startCorrection函数
        function startCorrection() {
            // 获取文件输入元素
            const templateInput = document.getElementById('templateUpload');
            const homeworkInput = document.getElementById('homeworkUpload');
            
            // 创建FormData对象
            const formData = new FormData();
            
            // 添加文件到表单数据（添加前检查是否选择了文件）
            if (templateInput.files[0]) {
                formData.append('template', templateInput.files[0]);
            }
            if (homeworkInput.files[0]) {
                formData.append('homework', homeworkInput.files[0]);
            }

            // 添加请求结果容器
            const resultDiv = document.createElement('div');
            resultDiv.style.margin = '20px';
            document.body.appendChild(resultDiv);

            fetch('/api/upload', {
                method: 'POST',
                body: formData
            }).then(response => response.json())
            .then(data => {
                resultDiv.innerHTML = `OCR结果：${data.ocr_text}<br>
                                       批改评分：${data.correction.Score}`;
            })
            .catch(error => {
                resultDiv.innerHTML = `错误：${error.message}`;
            });
        }
    </script>
</body>
</html>